<template>
  <view class="p-3 bg-white rounded-lg shadow mx-3 hover:shadow-xl transition-shadow duration-300">
    <!-- 头部 -->
    <view class="flex justify-between items-start mb-2">
      <text class="text-lg font-bold font-size-36rpx">美团节能改造11111</text>
      <view class="bg-green-100 px-8rpx py-4rpx rounded">
        <text class="text-green-600 text-sm font-size-24rpx">KC11111000</text>
      </view>
    </view>

    <!-- 公司信息 -->
    <view class="flex items-center gap-2 mb-1">
      <text class="text-base font-medium font-size-28rpx">某某人</text>
      <view class="h-1 w-1 bg-gray-400 rounded-full"></view>
      <text class="text-gray-500 font-size-26rpx">188888888</text>
    </view>

    <view class="mb-1">
      <wd-steps :active="active" align-center dot>
        <wd-step title="预勘察" />
        <wd-step title="开始勘察" />
        <wd-step title="勘察完成" />
      </wd-steps>
    </view>

    <!-- 职位标签 -->
    <view class="flex flex-wrap gap-2 mb-1">
      <text class="text-gray-500 font-size-23rpx">江苏省苏州市太仓市某某某小区</text>
      <!-- <view class="bg-gray-100 px-2 py-1 rounded">
        <text class="text-gray-600 text-sm">勘察</text>
      </view>
      <view class="bg-gray-100 px-2 py-1 rounded">
        <text class="text-gray-600 text-sm">学历不限</text>
      </view>
      <view class="bg-gray-100 px-2 py-1 rounded">
        <text class="text-gray-600 text-sm">8小时</text>
      </view>
      <view class="bg-orange-100 px-2 py-1 rounded">
        <text class="text-orange-600 text-sm">免费吃</text>
      </view> -->
    </view>

    <!-- 分割线 -->
    <view class="h-px bg-gray-200 my-2"></view>

    <!-- HR信息 -->
    <view class="flex justify-between items-center">
      <view class="flex items-center">
        <text>张某</text>
        <text>张某</text>
      </view>

      <wd-button type="primary" size="small" class="px-4" @click="handleContact">立即开始</wd-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const handleContact = () => {
  uni.navigateTo({
    url: '/pages/chat/index'
  })
}
const active = ref<number>(0)
</script>

<style lang="scss">
.job-card {
  // 自定义动画效果
  transition: transform 0.2s ease;

  &:active {
    transform: scale(0.98);
    background-color: #f8f9fa;
  }

  // 薪资标签动画
  .salary-tag {
    transition: all 0.3s ease;

    &:active {
      transform: rotate(-2deg);
    }
  }
}
</style>
